{% extends "base.html" %}

{% block title %}个人画像 - 智能推荐系统{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <!-- 用户基本信息 -->
        <div class="col-md-4 mb-4">
            <div class="card user-profile-card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-user-circle me-2"></i>用户信息
                    </h5>
                </div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        <div class="user-avatar mb-2">
                            <i class="fas fa-user-circle fa-4x text-muted"></i>
                        </div>
                        <h6>{{ user.username }}</h6>
                        <small class="text-muted">{{ user.email }}</small>
                    </div>

                    <hr>

                    <div class="user-stats">
                        <div class="preference-item">
                            <span>注册时间</span>
                            <span class="preference-value">{{ user.created_at.strftime('%Y-%m-%d') if user.created_at else '未知' }}</span>
                        </div>
                        <div class="preference-item">
                            <span>用户类型</span>
                            <span class="preference-value">
                                {% if preferences.user_type == 'explorer' %}
                                    <span class="badge bg-success">探索者</span>
                                {% elif preferences.user_type == 'mainstream' %}
                                    <span class="badge bg-primary">主流用户</span>
                                {% elif preferences.user_type == 'early_adopter' %}
                                    <span class="badge bg-warning">早期采用者</span>
                                {% elif preferences.user_type == 'niche_lover' %}
                                    <span class="badge bg-info">小众爱好者</span>
                                {% else %}
                                    <span class="badge bg-secondary">平衡型</span>
                                {% endif %}
                            </span>
                        </div>
                        <div class="preference-item">
                            <span>总交互次数</span>
                            <span class="preference-value">{{ interactions|length }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户偏好分析 -->
        <div class="col-md-8 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-pie me-2"></i>个性化偏好分析
                    </h5>
                </div>
                <div class="card-body">
                    {% if preferences %}
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">内容池偏好</h6>
                            {% if preferences.pool_preferences %}
                            <div class="pool-preferences">
                                {% for pool, ratio in preferences.pool_preferences.items() %}
                                <div class="preference-item">
                                    <span>
                                        {% if pool == 'cold_start' %}冷启动池
                                        {% elif pool == 'test' %}测试池
                                        {% elif pool == 'growth' %}成长池
                                        {% elif pool == 'mature' %}成熟池
                                        {% elif pool == 'long_tail' %}长尾池
                                        {% else %}{{ pool }}
                                        {% endif %}
                                    </span>
                                    <span class="preference-value">{{ "%.1f"|format(ratio * 100) }}%</span>
                                </div>
                                <div class="progress mb-2" style="height: 6px;">
                                    <div class="progress-bar" style="width: {{ (ratio * 100)|int }}%"></div>
                                </div>
                                {% endfor %}
                            </div>
                            {% else %}
                            <p class="text-muted">暂无偏好数据</p>
                            {% endif %}
                        </div>

                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">用户特征</h6>
                            <div class="user-characteristics">
                                <div class="preference-item">
                                    <span>探索倾向</span>
                                    <span class="preference-value">{{ "%.2f"|format(preferences.exploration_score|default(0)) }}</span>
                                </div>
                                <div class="progress mb-3" style="height: 6px;">
                                    <div class="progress-bar bg-success" style="width: {{ (preferences.exploration_score|default(0) * 100)|int }}%"></div>
                                </div>

                                <div class="preference-item">
                                    <span>多样性偏好</span>
                                    <span class="preference-value">{{ "%.2f"|format(preferences.diversity_preference|default(0)) }}</span>
                                </div>
                                <div class="progress mb-3" style="height: 6px;">
                                    <div class="progress-bar bg-info" style="width: {{ (preferences.diversity_preference|default(0) * 100)|int }}%"></div>
                                </div>

                                <div class="preference-item">
                                    <span>新奇寻求</span>
                                    <span class="preference-value">{{ "%.2f"|format(preferences.novelty_seeking|default(0)) }}</span>
                                </div>
                                <div class="progress mb-3" style="height: 6px;">
                                    <div class="progress-bar bg-warning" style="width: {{ (preferences.novelty_seeking|default(0) * 100)|int }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 偏好类型 -->
                    {% if preferences.preferred_genres %}
                    <hr>
                    <h6 class="text-muted mb-3">偏好类型</h6>
                    <div class="preferred-genres">
                        {% for genre in preferences.preferred_genres %}
                        <span class="badge bg-primary me-2 mb-2">{{ genre }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}

                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-chart-pie fa-3x text-muted mb-3"></i>
                        <p class="text-muted">暂无偏好分析数据</p>
                        <p class="text-muted">请先进行一些评分和交互来建立您的个性化画像</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 最近交互历史 -->
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2"></i>最近交互
                    </h5>
                </div>
                <div class="card-body">
                    {% if interactions %}
                    <div class="interaction-list">
                        {% for interaction in interactions[:10] %}
                        <div class="interaction-item d-flex justify-content-between align-items-center py-2 border-bottom">
                            <div>
                                <span class="fw-bold">电影 {{ interaction.movie_id }}</span>
                                <span class="badge bg-{{ 'success' if interaction.interaction_type == 'like' else 'warning' if interaction.interaction_type == 'rating' else 'info' }} ms-2">
                                    {% if interaction.interaction_type == 'like' %}喜欢
                                    {% elif interaction.interaction_type == 'rating' %}评分: {{ interaction.interaction_value }}
                                    {% elif interaction.interaction_type == 'view' %}查看
                                    {% else %}{{ interaction.interaction_type }}
                                    {% endif %}
                                </span>
                            </div>
                            <small class="text-muted">{{ interaction.timestamp.strftime('%m-%d %H:%M') }}</small>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-3">
                        <i class="fas fa-history fa-2x text-muted mb-2"></i>
                        <p class="text-muted mb-0">暂无交互历史</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 推荐历史 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-list me-2"></i>推荐历史
                    </h5>
                </div>
                <div class="card-body">
                    {% if recommendation_logs %}
                    <div class="recommendation-list">
                        {% for log in recommendation_logs[:5] %}
                        <div class="recommendation-item py-2 border-bottom">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <span class="fw-bold">推荐 {{ loop.index }}</span>
                                    <span class="badge bg-info ms-2">{{ log.algorithm_version }}</span>
                                    {% if log.recommendation_pools %}
                                    <div class="mt-1">
                                        <small class="text-muted">
                                            {% set pools = log.recommendation_pools|from_json %}
                                            {% for pool, count in pools.items() %}
                                            {{ pool }}:{{ count }}{% if not loop.last %}, {% endif %}
                                            {% endfor %}
                                        </small>
                                    </div>
                                    {% endif %}
                                </div>
                                <small class="text-muted">{{ log.timestamp.strftime('%m-%d %H:%M') }}</small>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-3">
                        <i class="fas fa-list fa-2x text-muted mb-2"></i>
                        <p class="text-muted mb-0">暂无推荐历史</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}